<!--比例热力图-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

import FuncCompMixin from '@/mixin/FuncCompMixin'
import ChartCompMixin from '@/mixin/ChartCompMixin'
import PnDesigner from '@/utils/PnDesigner'

const _this = {
  name: 'ProportionHeadMapChart', // 此名称必须填写，且必须与组件文件名相同
  mixins: [FuncCompMixin, ChartCompMixin],
  attr: {
    version: '2.1',
    configDataTemp: Object.assign({

      // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
      chartOption: {
        title: PnDesigner.buildTitleConfigData(),
        grid: {
          left: 30,
          right: 30,
          top: 30,
          bottom: 30
        },
        xAxis: {
          show: true,
          axisLabel: {
            fontSize: 12,
            color: 'rgb(144, 160, 174)',
            fontWeight: 'normal',
            rotate: 0,
          },
          data: ["不了解", "了解20%-40%", "了解40%-60%", "了解60%-80%", "了解80%以上"]
        },
        yAxis: {
          show: true,
          axisLabel: {
            fontSize: 12,
            color: 'rgb(144, 160, 174)',
            fontWeight: 'normal'
          },
          data: ["科技制造业", "文化产业", "商务服务", "物流仓储", "制造业"]
        },
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          color: []
        },
        series: {
          name: '人数',
          label: {
            normal: {
              show: true,
              color: '#fff',
              fontSize: 12
            },
            emphasis: {
              show: true,
              color: '#fff',
              fontSize: 14,
            }
          },
          itemStyle: {
            normal: {
              borderWidth: 0,
              borderColor: "rgba(255, 255, 255, 0.5)"
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: "rgba(0, 0, 0, 0.3)"
            }
          }
        }
      }

    }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
      ds_resultObjTemplate: [
        {
          field: 'x',
          remark: '对应横坐标'
        },
        {
          field: 'y',
          remark: '对应纵坐标'
        },
        {
          field: 'value',
          remark: '值'
        }
      ],
      ds_resultObj: [
        {x: '不了解', y: '科技制造业', value: 53},
        {x: '不了解', y: '文化产业', value: 7},
        {x: '不了解', y: '商务服务', value: 26},
        {x: '不了解', y: '物流仓储', value: 34},
        {x: '不了解', y: '制造业', value: 12},

        {x: '了解20%-40%', y: '科技制造业', value: 39},
        {x: '了解20%-40%', y: '文化产业', value: 3},
        {x: '了解20%-40%', y: '商务服务', value: 43},
        {x: '了解20%-40%', y: '物流仓储', value: 14},
        {x: '了解20%-40%', y: '制造业', value: 65},

        {x: '了解40%-60%', y: '科技制造业', value: 19},
        {x: '了解40%-60%', y: '文化产业', value: 12},
        {x: '了解40%-60%', y: '商务服务', value: 17},
        {x: '了解40%-60%', y: '物流仓储', value: 18},
        {x: '了解40%-60%', y: '制造业', value: 22},

        {x: '了解60%-80%', y: '科技制造业', value: 31},
        {x: '了解60%-80%', y: '文化产业', value: 38},
        {x: '了解60%-80%', y: '商务服务', value: 75},
        {x: '了解60%-80%', y: '物流仓储', value: 11},
        {x: '了解60%-80%', y: '制造业', value: 6},

        {x: '了解80%以上', y: '科技制造业', value: 9},
        {x: '了解80%以上', y: '文化产业', value: 0},
        {x: '了解80%以上', y: '商务服务', value: 1},
        {x: '了解80%以上', y: '物流仓储', value: 2},
        {x: '了解80%以上', y: '制造业', value: 18}
      ],
      ds_useFilter: true, // 是否使用过滤器，默认不使用
      ds_useTimer: true, // 是否开启定时器配置，默认不开启
    }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration([
      PnDesigner.buildFuncCompInteractionStreamItem('itemClick', [
        PnDesigner.buildFuncCompInteractionFieldsMapItem('x', '', '对应横坐标'),
        PnDesigner.buildFuncCompInteractionFieldsMapItem('y', '', '对应纵坐标'),
        PnDesigner.buildFuncCompInteractionFieldsMapItem('value', '', '值'),
      ])
    ]))
  },
  data() {
    return {}
  },
  mounted() {
    this.init();

    this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
      this.init()
    })
  },
  methods: {
    init() { // 组价初始化函数，函数名必须使用init，不可更改
      this.initDatasource(() => {
        this.chart.setOption(this.chartOption);
        this.runCustomGlobalJsCode();
        this.runDataItemClickJsCode(this.launchInteractionStream)
      }, (result) => {
        this.chart.setOption(this.chartOption);
        this.runCustomGlobalJsCode();
        this.runDataItemClickJsCode(this.launchInteractionStream)
      });
    },

    launchInteractionStream (params) {
      this.$PnDesigner.launchInteractionStream(
          this.component.compConfigData, 'itemClick', this.runCustomFilter(this.component.compConfigData.ds_resultObj)[params.dataIndex])
    }
  },
  computed: {
    chartOption() {

      let xAxisData = this.component.compConfigData.chartOption.xAxis.data;
      let yAxisData = this.component.compConfigData.chartOption.yAxis.data;

      let option = {
        title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
        grid: {
          top: this.component.compConfigData.chartOption.grid.top,
          left: this.component.compConfigData.chartOption.grid.left,
          right: this.component.compConfigData.chartOption.grid.right,
          bottom: this.component.compConfigData.chartOption.grid.bottom,
          containLabel: true
        },
        tooltip: {
          show: true
        },
        xAxis: {
          show: this.component.compConfigData.chartOption.xAxis.show,
          type: "category",
          data: xAxisData,
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: this.component.compConfigData.chartOption.xAxis.axisLabel.fontSize,
            color: this.component.compConfigData.chartOption.xAxis.axisLabel.color,
            fontWeight: this.component.compConfigData.chartOption.xAxis.axisLabel.fontWeight,
            rotate: this.component.compConfigData.chartOption.xAxis.axisLabel.rotate
          }
        },
        yAxis: {
          show: this.component.compConfigData.chartOption.yAxis.show,
          nameLocation: "end",
          type: "category",
          data: yAxisData,
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: this.component.compConfigData.chartOption.yAxis.axisLabel.fontSize,
            color: this.component.compConfigData.chartOption.yAxis.axisLabel.color,
            fontWeight: this.component.compConfigData.chartOption.yAxis.axisLabel.fontWeight
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          color: []
        },
        series: [{
          name: "人数",
          type: "heatmap",
          data: [],
          label: {
            normal: {
              show: this.component.compConfigData.chartOption.series.label.normal.show,
              color: this.component.compConfigData.chartOption.series.label.normal.color,
              fontSize: this.component.compConfigData.chartOption.series.label.normal.fontSize,
              // formatter: function (data) {
              //   return data.value[2].toFixed(1) + '%';
              // }
            },
            emphasis: {
              show: this.component.compConfigData.chartOption.series.label.emphasis.show,
              color: this.component.compConfigData.chartOption.series.label.emphasis.color,
              fontSize: this.component.compConfigData.chartOption.series.label.emphasis.fontSize,
            }
          },
          itemStyle: {
            normal: {
              borderWidth: this.component.compConfigData.chartOption.series.itemStyle.normal.borderWidth,
              borderColor: this.component.compConfigData.chartOption.series.itemStyle.normal.borderColor
            },
            emphasis: {
              shadowBlur: this.component.compConfigData.chartOption.series.itemStyle.emphasis.shadowBlur,
              shadowColor: this.component.compConfigData.chartOption.series.itemStyle.emphasis.shadowColor
            }
          }
        }]
      };

      if (this.component.compConfigData.chartOption.visualMap.color.length > 0) {
        option.visualMap.color = this.component.compConfigData.chartOption.visualMap.color
      }else {
        option.visualMap.color = [
          this.currentEchartThemeColors[0],
          this.currentEchartThemeColors[7]
        ]
      }

      let seriesData = [];
      this.runCustomFilter(this.component.compConfigData.ds_resultObj).forEach(item => {
        let seriesDataItem = [xAxisData.indexOf(item.x), yAxisData.indexOf(item.y), item.value];
        seriesData.push(seriesDataItem)
      });

      option.series[0].data = seriesData;

      // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
      option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

      return option;
    }
  }
};

export default _this
</script>

<style scoped>

</style>
